<template>
	<view class="login-contain">
		<view class="login-content">
			<view class="wrapper">
				<view class="welcome">
					<image src="../../static/logo.png" class="logo-image"></image>
					<div>煤矿常态化培训系统</div>
				</view>
			</view>
			<button class="btn" @click="getWXname">快捷登录</button>
			<view @click="goLogin" class="loginBox">帐号密码登录</view>
		</view>
		<view class="describe">
			本系统仅限本公司内部人员使用,登录前请提前联系管理员录入身份信息，否则无法登录使用！
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		Token_Store_Key
	} from '@/utils/common'
	import {
		aesEncryptStr
	} from '@/utils/index'
	import publicApi from '@/api/public'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'

	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				form: {
					code: ''
				},
			}
		},
		onLoad() {},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/public/login2'
				});
			},
			urlLink(url) {
				uni.navigateTo({
					url: `/pages/my/webView?url=${url}`
				})
			},
			getWXname() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('res-login', res);
						//获取到code
						this.form.code = res.code;
						console.log('code', res.code);
					},
				});

				// 获取用户信息
				uni.getUserProfile({
					desc: '获取你的昵称、头像、地区及性别',
					success: res => {
						console.log('获取你的昵称、头像', res);
						// 登录请求
						publicApi.login(aesEncryptStr(this.form)).then((
							res) => { //这里是调用接口成功的
							console.log(33, res) //成功返回url接口的数据
							Vue.prototype.$openid = res.response.openId;
							if (res.response.userExist === true) {
								uni.clearStorageSync();
								uni.setStorageSync(Token_Store_Key, res.response.token);
								const token = uni.getStorageSync(Token_Store_Key)
								console.log(token, 'token')
								uni.reLaunch({
									url: '/pages/index/index'
								});
							} else {
								uni.reLaunch({
									url: '/pages/public/register?openId=' + res.response.openId
								});
							}
						})
					},
					fail: res => {
						console.log(2);
						console.log(res)
						//拒绝授权
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				});
			},

			// getWXname() {
			// 	var that = this;
			// 	uni.showLoading({ // 展示加载框
			// 		title: '加载中',
			// 	});
			// 	uni.getUserProfile({ //获取到用户信息
			// 		desc: '获取用户信息',
			// 		success: (obj) => {
			// 			console.log('obj', obj);
			// 			// 调用 action ，请求登录接口
			// 			publicApi.login(aesEncryptStr(this.form)).then((
			// 				res) => { //这里是调用接口成功的
			// 				console.log(33, res) //成功返回url接口的数据
			// 				Vue.prototype.$openid = res.response.openId;
			// 				if (res.response.userExist === true) {
			// 					uni.clearStorageSync();
			// 					uni.setStorageSync(Token_Store_Key, res.response.token);
			// 					const token = uni.getStorageSync(Token_Store_Key)
			// 					console.log(token, 'token')
			// 					uni.reLaunch({
			// 						url: '/pages/index/index'
			// 					});
			// 				} else {
			// 					uni.reLaunch({
			// 						url: '/pages/public/register?openId=' + res.response.openId
			// 					});
			// 				}
			// 			})
			// 		},
			// 		fail: () => {
			// 			uni.showToast({
			// 				title: '授权已取消',
			// 				icon: 'error',
			// 				mask: true,
			// 			});
			// 		},
			// 		complete: () => {
			// 			// 隐藏loading
			// 			uni.hideLoading();
			// 		},
			// 	});


		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
		height: 100%;
	}

	.login-contain {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: center;
		height: 100%;


		.login-content {
			margin-top: -200rpx;
			width: 90%;

			.btn {
				width: 80%;
				margin: 0 auto;
				font-size: 18px;
				background-color: #07c160;
				color: #fff;
			}

			.loginBox {
				text-decoration: underline;
				float: right;
				margin-top: 10rpx;
				cursor: pointer;
			}

			.wrapper {
				width: 100%;

				.welcome {
					font-size: 46rpx;
					color: #555;
					text-shadow: 2rpx 0rpx 2rpx rgba(0, 0, 0, .3);
					text-align: center;
					margin-bottom: 80rpx;

					.logo-image {
						width: 300rpx;
						height: 200rpx;
					}
				}

				.login-agree {

					margin-top: 36rpx;
					color: #646464;
					font-size: 22rpx;
					display: flex;
					align-items: center;

					.agree-check {
						margin-right: 10rpx;
						width: 32rpx;
						height: 32rpx;
						border-radius: 50rpx;
						border: 2rpx solid #68bfd6;
						color: #68bfd6;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.agree-check-seleted {
						background-color: #68bfd6;
						color: #FFFFFF;
					}


					.agree-link {
						font-size: 22rpx;
						display: inline;
						color: #333333;
					}
				}

				.confirm-btn {
					margin-top: 30rpx;
					padding: 0rpx !important;
					width: 100%;
					height: 76rpx;
					line-height: 76rpx;
					background: $uni-color-primary;
					color: #ffffff;
					font-size: 30rpx;
				}
			}



			.wdd-user-login-register {
				margin-left: 10rpx;
			}

			.register-section {
				width: 100%;
				font-size: $font-sm+2rpx;
				color: $font-color-base;
				margin-top: 80rpx;

				text {
					color: $font-color-spec;
					margin-left: 10rpx;
				}
			}
		}

		.describe {
			margin-top: 100rpx;
		}
	}
</style>